<template>
  <!-- oi 别骂，业务需求必须这样做没办法 -->
  <div :class="{ main_container: enterType == 1 }">
    <!-- enterType==2 题库中选择  enterType==1 查看题库  -->
    <el-drawer
      v-if="enterType == 2"
      :append-to-body="true"
      :wrapperClosable="false"
      :title="title"
      size="1440px"
      :visible="open"
      @close="handleClose"
    >
      <div class="drawer_container">
        <div class="main_content">
          <div class="main_content_left">
            <div class="left_btns">
              <div
                @click="changeAllExpand('allExpand')"
                class="expand_box pointer"
              >
                <img
                  class="icon"
                  :src="
                    allExpand
                      ? require('@/assets/images/courseAdd/expand.png')
                      : require('@/assets/images/courseAdd/shrink.png')
                  "
                  alt=""
                />
                {{ allExpand ? "全部展开" : "全部收起" }}
              </div>
            </div>
            <div class="course_tree" v-loading="treesLoading">
              <el-tree
                :data="courseIndexTree"
                node-key="id"
                ref="selectTreeRef"
                :expand-on-click-node="false"
                :highlight-current="true"
                :default-expand-all="true"
                :current-node-key="nowIndexId"
                @node-click="handleClick"
              >
                <div class="custom_tree_node" slot-scope="{ data }">
                  <div
                    :style="{
                      width: `calc(305px - 90px - ${(data.level - 1) * 16}px`,
                    }"
                    class="label"
                  >
                    <tooltip
                      :text="data.name"
                      position="top-start"
                      width="100%"
                    ></tooltip>
                  </div>
                  <div class="topic_num">
                    {{ data.count > 99 ? "99+" : data.count }}
                  </div>
                </div>
              </el-tree>
            </div>
          </div>
          <div class="main_content_right">
            <div class="right_top">
              <div class="search_collect">
                <div class="ipt_collect">
                  <div class="item_ipt">
                    <div class="label">题干</div>
                    <el-input
                      clearable
                      size="small"
                      placeholder="请输入题干"
                      v-model="searchModel.content"
                      class="ipt"
                    ></el-input>
                  </div>
                  <div class="item_ipt">
                    <div class="label">题型</div>
                    <el-select
                      size="small"
                      class="ipt"
                      filterable
                      clearable
                      v-model.number="searchModel.topicType"
                      placeholder="请选择题型"
                    >
                      <el-option label="全部" value=""></el-option>
                      <el-option
                        v-for="dict in dict.type.topic_type"
                        :key="Number(dict.value)"
                        :label="dict.label"
                        :value="Number(dict.value)"
                      />
                    </el-select>
                  </div>
                  <div class="item_ipt">
                    <div class="label">难度</div>
                    <el-select
                      size="small"
                      class="ipt"
                      filterable
                      clearable
                      v-model.number="searchModel.difficulty"
                      placeholder="请选择难度"
                    >
                      <el-option label="全部" value=""></el-option>
                      <el-option
                        v-for="dict in dict.type.topic_difficulty"
                        :key="Number(dict.value)"
                        :label="dict.label"
                        :value="Number(dict.value)"
                      />
                    </el-select>
                  </div>
                </div>
                <div class="btns">
                  <div @click="getBankTopicLict" class="search_btn">搜索</div>
                  <div @click="resetSearch" class="reset_btn">重置</div>
                </div>
              </div>
            </div>
            <div v-loading="loading">
              <div class="topic_btns">
                <div class="left_btns">
                  <div @click="addTopic" class="blue_btn">
                    <svg-icon class-name="btn_icon" icon-class="add_svg" />
                    手动录入试题
                  </div>
                  <div @click="toImport(1)" class="orange_btn">
                    <svg-icon class-name="btn_icon" icon-class="muttle_svg" />
                    批量导入试题
                  </div>
                  <div @click="handleExport" class="aqua_btn">
                    <svg-icon class-name="btn_icon" icon-class="export_svg" />
                    导出题库Word
                  </div>
                  <el-dropdown>
                    <div class="green_btn">
                      <svg-icon class-name="btn_icon" icon-class="AI_svg" />
                      AI出题
                    </div>
                    <el-dropdown-menu slot="dropdown">
                      <div @click="showAiTopic(1)">
                        <el-dropdown-item>基于课程内容</el-dropdown-item>
                      </div>
                      <div @click="showAiTopic(0)">
                        <el-dropdown-item>联网出题</el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <div @click="multiDel" class="red_btn">
                    <svg-icon class-name="btn_icon" icon-class="delete_svg" />
                    删除
                  </div>
                </div>
                <div class="right_btns" v-if="topicList.length > 0">
                  <el-checkbox
                    @change="changeAllMulti(allMultiDelete)"
                    v-model="allMultiDelete"
                    >全选</el-checkbox
                  >
                  <div
                    @click="changeAllExpand('allTopicExpand')"
                    class="expand_box pointer"
                  >
                    <img
                      class="icon"
                      :src="
                        allTopicExpand
                          ? require('@/assets/images/courseAdd/expand.png')
                          : require('@/assets/images/courseAdd/shrink.png')
                      "
                      alt=""
                    />
                    {{ allTopicExpand ? "全部展开" : "全部收起" }}
                  </div>
                </div>
              </div>
              <template v-if="topicList.length > 0">
                <div class="right_mid">
                  <div class="topic_collect">
                    <div
                      class="topic_item"
                      v-for="(item, index) in topicList"
                      :key="index"
                    >
                      <div class="checkbox">
                        <el-checkbox
                          @change="changeItemSelect(item)"
                          v-model="item.checked"
                        ></el-checkbox>
                      </div>
                      <div class="topic_info">
                        <div class="top">
                          <div class="top_left">
                            <!--  包含html    -->
                            <div
                              v-if="$isIncludesHtml(item.content)"
                              :class="{ content_hide: item.expandState }"
                              class="topic_content line_feed"
                              v-html="
                                `${item.content.slice(0,3)}${index + 1 +(searchModel.pageNum - 1) *  searchModel.pageSize
                                }/${total}<span class='color_orange'>【${
                                  $store.getters.topicTypeText[item.topicType]
                                }】</span> <span class='difficulty_item ${
                                  difficultyBgClass[item.difficulty]
                                }'>${
                                  $store.getters.difficultyText[item.difficulty]
                                }</span> ${$renderedDescription(item.content.slice(3))}`
                              "
                            ></div>
                            <!--  不包含html    -->
                            <div
                              v-else
                              :class="{ content_hide: item.expandState }"
                              class="topic_content line_feed"
                              v-html="
                                `${index + 1 +(searchModel.pageNum - 1) *  searchModel.pageSize
                                }/${total}<span class='color_orange'>【${
                                  $store.getters.topicTypeText[item.topicType]
                                }】</span> <span class='difficulty_item ${
                                  difficultyBgClass[item.difficulty]
                                }'>${
                                  $store.getters.difficultyText[item.difficulty]
                                }</span> ${$renderedDescription(item.content)}`
                              "
                            ></div>
                          </div>
                          <div class="top_right">
                            <div
                              @click="item.expandState = !item.expandState"
                              class="collapse_box pointer"
                            >
                              <span>{{
                                item.expandState ? "展开" : "收起"
                              }}</span>
                              <svg-icon
                                v-if="!item.expandState"
                                class-name="collapse_svg "
                                icon-class="collapse_close"
                              />
                              <svg-icon
                                v-if="item.expandState"
                                class-name="collapse_svg"
                                icon-class="collapse_open"
                              />
                            </div>
                          </div>
                        </div>
                        <div
                          class="content_box"
                          :class="{ max_height_0: item.expandState }"
                        >
                          <template v-if="choiceTypes.includes(item.topicType)">
                            <div class="option_list">
                              <div
                                class="cc_topic_item"
                                v-for="(
                                  topicItem, topicIndex
                                ) in item.ccTopicOptionList"
                                :key="topicIndex"
                              >
                                <div class="label_text">
                                  {{ labelList[topicIndex] }}.
                                </div>
                                <div
                                  class="option_item line_feed"
                                  v-html="
                                    `${$renderedDescription(
                                      topicItem.optionValue
                                    )}`
                                  "
                                ></div>
                              </div>
                            </div>
                          </template>
                          <div class="option_list" v-if="item.topicType == 2">
                            <div class="option_item">A.正确</div>
                            <div class="option_item">B.错误</div>
                          </div>
                          <div v-if="item.answer" class="true_answer" v-html="$renderedDescription(`答案：${item.answer}`)"></div>
                          <div v-if="!item.answer" class="true_answer">
                            答案：<span>无答案</span>
                          </div>
                          <div v-if="item.resolve" class="reslove_text" v-html="$renderedDescription(`解析：${item.resolve}`)"></div>
                          <div v-if="!item.resolve" class="reslove_text">
                            解析：<span>无解析</span>
                          </div>
                          <div class="topic_statistics">
                            <div class="statistics_left">
                              <!--    <div class="text">使用次数：1</div>-->
                              <div class="text">
                                答题次数：{{ item.answerCount }}次
                              </div>
                              <div class="text">
                                <span v-if="!QaTypes.includes(item.topicType)">准确率：{{ item.answerRange }}%</span>
                                <el-popover placement="top" trigger="click">
                                  <div class="hover_content">
                                    <div class="left_label">选项选择比例:</div>
                                    <div class="content">
                                      <!--    选择题    -->
                                      <template
                                        v-if="
                                          choiceTypes.includes(item.topicType)
                                        "
                                      >
                                        <div
                                          class="range_item"
                                          v-for="(
                                            topicItem, topicIndex
                                          ) in item.ccTopicOptionList"
                                          :key="topicIndex"
                                        >
                                          {{ labelList[topicIndex] }}:
                                          {{ formatRange(1, item, topicItem) }}%
                                        </div>
                                      </template>
                                      <!--    判断题    -->
                                      <template v-if="item.topicType == 2">
                                        <div class="range_item">
                                          A.正确:{{
                                            formatRange(2, item).trueRange
                                          }}%
                                        </div>
                                        <div class="range_item">
                                          B.错误:
                                          {{ formatRange(2, item).falseRange }}%
                                        </div>
                                      </template>
                                    </div>
                                  </div>
                                  <div slot="reference">
                                    <!--    判断题&选择题才显示    -->
                                    <svg-icon
                                      v-if="[0, 1, 2].includes(item.topicType)"
                                      class-name="statistics_svg pointer"
                                      icon-class="statistics_svg"
                                    />
                                  </div>
                                </el-popover>
                              </div>
                            </div>
                            <div class="statistics_right">
                              <div
                                @click="editTopic(item)"
                                class="btn_text edit pointer"
                              >
                                编辑
                              </div>
                              <div class="line"></div>
                              <div
                                @click="delTopic(item)"
                                class="btn_text delete pointer"
                              >
                                删除
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="paging_box" v-show="total > 0">
                  <pagination
                    :iSmanger="false"
                    :total="total"
                    @pagination="refreshBankTopicLict"
                    :page.sync="searchModel.pageNum"
                    :limit.sync="searchModel.pageSize"
                  />
                </div>
                <div class="right_bottom" v-if="enterType == 2">
                  <div
                    @click="showSelectTopicDrawer"
                    class="bottom_left pointer"
                  >
                    已选择（{{ selections.length }}）
                  </div>
                  <div class="bottom_right">
                    <div class="text">共{{ total }}题</div>
                    <div class="btns">
                      <div @click="handleClose" class="close_btn">关闭</div>
                      <div @click="sumitData" class="sure_btn">确定</div>
                    </div>
                  </div>
                </div>
              </template>
              <div class="empty_box" v-if="topicList.length == 0">
                <el-empty
                  :image-size="80"
                  image="https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/empty_img_topiv.png"
                  description="暂无题目"
                ></el-empty>
              </div>
            </div>
          </div>
        </div>
        <!--  添加/编辑试题抽屉  -->
        <addTopicDrawer
          @submit="saveTopicByType"
          :open.sync="showTopicState"
          :topic-id="currentTopicId"
          :index-id="nowIndexId"
          :course-id="courseId"
          :open-type="openTopicType"
        ></addTopicDrawer>
        <!--  AI出题    -->
        <AIoutTopicDrawer
          :show.sync="showAiDrawer"
          @updateData="getBankTopicLict"
          :open-type="showAiType"
          :index-id="nowIndexId"
          :course-id="courseId"
        ></AIoutTopicDrawer>
      </div>
    </el-drawer>
    <!-- enterType==2 题库中选择  enterType==1 查看题库  -->
    <template v-if="enterType == 1">
      <div class="title_name">
        题库详情
        <el-tooltip placement="top">
          <div slot="content">
            1、单选题、多选题、判断题选项选择比例计算方式： <br />
            选项选择比例=选项被选择次数/该题作答次数（未作答不计入）<br />
            2、答题次数：该试题被作答次数<br />
            3、准确率：单选题、多选题、判断题答案完全匹配正确答案的比例<br />
          </div>
          <svg-icon
            class-name="question_icon pointer"
            icon-class="question_svg"
          />
        </el-tooltip>
      </div>
      <div class="drawer_container rela">
        <div class="main_content height_componentType_2">
          <div class="main_content_left">
            <div class="left_btns">
              <div
                @click="changeAllExpand('allExpand')"
                class="expand_box pointer"
              >
                <img
                  class="icon"
                  :src="
                    allExpand
                      ? require('@/assets/images/courseAdd/expand.png')
                      : require('@/assets/images/courseAdd/shrink.png')
                  "
                  alt=""
                />
                {{ allExpand ? "全部展开" : "全部收起" }}
              </div>
            </div>
            <div class="course_tree">
              <el-tree
                :data="courseIndexTree"
                node-key="id"
                ref="selectTreeRef"
                :expand-on-click-node="false"
                :highlight-current="true"
                :default-expand-all="true"
                :current-node-key="nowIndexId"
                @node-click="handleClick"
              >
                <div class="custom_tree_node" slot-scope="{ data }">
                  <div
                    :style="{
                      width: `calc(305px - 90px - ${(data.level - 1) * 16}px`,
                    }"
                    class="label"
                  >
                    <tooltip
                      :text="data.name"
                      position="top-start"
                      width="100%"
                    ></tooltip>
                  </div>
                  <div class="topic_num">
                    {{ data.count > 99 ? "99+" : data.count }}
                  </div>
                </div>
              </el-tree>
            </div>
          </div>
          <div class="main_content_right">
            <div class="right_top">
              <div class="search_collect">
                <div class="ipt_collect">
                  <div class="item_ipt">
                    <div class="label">题干</div>
                    <el-input
                      clearable
                      size="small"
                      placeholder="请输入题干"
                      v-model="searchModel.content"
                      class="mini_ipt"
                    ></el-input>
                  </div>
                  <div class="item_ipt">
                    <div class="label">题型</div>
                    <el-select
                      class="mini_ipt"
                      size="small"
                      filterable
                      clearable
                      v-model.number="searchModel.topicType"
                      placeholder="请选择题型"
                    >
                      <el-option label="全部" value=""></el-option>
                      <el-option
                        v-for="dict in dict.type.topic_type"
                        :key="Number(dict.value)"
                        :label="dict.label"
                        :value="Number(dict.value)"
                      />
                    </el-select>
                  </div>
                  <div class="item_ipt">
                    <div class="label">难度</div>
                    <el-select
                      class="mini_ipt"
                      size="small"
                      filterable
                      clearable
                      v-model.number="searchModel.difficulty"
                      placeholder="请选择难度"
                    >
                      <el-option label="全部" value=""></el-option>
                      <el-option
                        v-for="dict in dict.type.topic_difficulty"
                        :key="Number(dict.value)"
                        :label="dict.label"
                        :value="Number(dict.value)"
                      />
                    </el-select>
                  </div>
                </div>
                <div class="btns">
                  <div @click="getBankTopicLict" class="search_btn">搜索</div>
                  <div @click="resetSearch" class="reset_btn">重置</div>
                </div>
              </div>
            </div>
            <div v-loading="loading">
              <div class="topic_btns">
                <div class="left_btns">
                  <div @click="addTopic" class="blue_btn">
                    <svg-icon class-name="btn_icon" icon-class="add_svg" />
                    手动录入试题
                  </div>
                  <div ref="orangeBtnRef" @click="toImport(2)" class="orange_btn">
                    <svg-icon class-name="btn_icon" icon-class="muttle_svg" />
                    批量导入试题
                  </div>
                  <div @click="handleExport" class="aqua_btn">
                    <svg-icon class-name="btn_icon" icon-class="export_svg" />
                    导出题库Word
                  </div>
                  <el-dropdown>
                    <div class="green_btn">
                      <svg-icon class-name="btn_icon" icon-class="AI_svg" />
                      AI出题
                    </div>
                    <el-dropdown-menu slot="dropdown">
                      <div @click="showAiTopic(1)">
                        <el-dropdown-item>基于课程内容</el-dropdown-item>
                      </div>
                      <div @click="showAiTopic(0)">
                        <el-dropdown-item>联网出题</el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <div @click="multiDel" class="red_btn">
                    <svg-icon class-name="btn_icon" icon-class="delete_svg" />
                    删除
                  </div>
                </div>
                <div class="right_btns" v-if="topicList.length > 0">
                  <el-checkbox @change="changeAllMulti(allMultiDelete)" v-model="allMultiDelete">全选</el-checkbox>
                  <div
                    @click="changeAllExpand('allTopicExpand')" class="expand_box pointer">
                    <img class="icon" :src="allTopicExpand? require('@/assets/images/courseAdd/expand.png')  : require('@/assets/images/courseAdd/shrink.png') " alt=""/>
                    {{ allTopicExpand ? "全部展开" : "全部收起" }}
                  </div>
                </div>
              </div>
              <template v-if="topicList.length > 0">
                <div
                  class="right_mid"
                  :class="{ height_right_2: enterType == 1 }"
                >
                  <div class="topic_collect">
                    <div
                      class="topic_item"
                      v-for="(item, index) in topicList"
                      :key="index"
                    >
                      <div class="checkbox margrn_2">
                        <el-checkbox
                          @change="changeItemSelect(item)"
                          v-model="item.checked"
                        ></el-checkbox>
                      </div>
                      <div class="topic_info">
                        <div class="top">
                          <div class="top_left">
                            <!--  包含html    -->
                            <div
                              v-if="$isIncludesHtml(item.content)"
                              :class="{ content_hide: item.expandState }"
                              class="max_width_700 topic_content line_feed"
                              v-html="
                                `${item.content.slice(0,3)}${index + 1 +(searchModel.pageNum - 1) *  searchModel.pageSize
                                }/${total}<span class='color_orange'>【${
                                  $store.getters.topicTypeText[item.topicType]
                                }】</span> <span class='difficulty_item ${
                                  difficultyBgClass[item.difficulty]
                                }'>${
                                  $store.getters.difficultyText[item.difficulty]
                                }</span> ${$renderedDescription(item.content.slice(3))}`
                              "
                            ></div>
                            <!--  不包含html    -->
                            <div
                              v-else
                              :class="{ content_hide: item.expandState }"
                              class="max_width_700 topic_content line_feed"
                              v-html="
                                `${index + 1 +(searchModel.pageNum - 1) *  searchModel.pageSize
                                }/${total}<span class='color_orange'>【${
                                  $store.getters.topicTypeText[item.topicType]
                                }】</span> <span class='difficulty_item ${
                                  difficultyBgClass[item.difficulty]
                                }'>${
                                  $store.getters.difficultyText[item.difficulty]
                                }</span> ${$renderedDescription(item.content)}`
                              "
                            ></div>
                          </div>
                          <div class="top_right">
                            <div
                              @click="item.expandState = !item.expandState"
                              class="collapse_box pointer"
                            >
                              <span>{{
                                item.expandState ? "展开" : "收起"
                              }}</span>
                              <svg-icon
                                v-if="!item.expandState"
                                class-name="collapse_svg "
                                icon-class="collapse_close"
                              />
                              <svg-icon
                                v-if="item.expandState"
                                class-name="collapse_svg"
                                icon-class="collapse_open"
                              />
                            </div>
                          </div>
                        </div>
                        <div
                          class="content_box"
                          :class="{ max_height_0: item.expandState }"
                        >
                          <template v-if="choiceTypes.includes(item.topicType)">
                            <div class="option_list">
                              <div
                                class="cc_topic_item"
                                v-for="(
                                  topicItem, topicIndex
                                ) in item.ccTopicOptionList"
                                :key="topicIndex"
                              >
                                <div class="label_text">
                                  {{ labelList[topicIndex] }}.
                                </div>
                                <div
                                  class="option_item line_feed"
                                  v-html="
                                    `${$renderedDescription(
                                      topicItem.optionValue
                                    )}`
                                  "
                                ></div>
                              </div>
                            </div>
                          </template>
                          <div class="option_list" v-if="item.topicType == 2">
                            <div class="option_item">A.正确</div>
                            <div class="option_item">B.错误</div>
                          </div>
                          <div v-if="item.answer" class="true_answer" v-html="$renderedDescription(`答案：${item.answer}`)"></div>
                          <div v-if="!item.answer" class="true_answer">
                            答案：<span>无答案</span>
                          </div>
                          <div v-if="item.resolve" class="reslove_text" v-html="$renderedDescription(`解析：${item.resolve}`)"></div>
                          <div v-if="!item.resolve" class="reslove_text">
                            解析：<span>无解析</span>
                          </div>
                          <div class="topic_statistics">
                            <div class="statistics_left">
                              <!--    <div class="text">使用次数：1</div>-->
                              <div class="text">
                                答题次数：{{ item.answerCount }}次
                              </div>
                              <div class="text">
                                <span v-if="!QaTypes.includes(item.topicType)">准确率：{{ item.answerRange }}%</span>
                                <el-popover placement="top" trigger="click">
                                  <div class="hover_content">
                                    <div class="left_label">选项选择比例:</div>
                                    <div class="content">
                                      <!--    选择题    -->
                                      <template
                                        v-if="
                                          choiceTypes.includes(item.topicType)
                                        "
                                      >
                                        <div
                                          class="range_item"
                                          v-for="(
                                            topicItem, topicIndex
                                          ) in item.ccTopicOptionList"
                                          :key="topicIndex"
                                        >
                                          {{ labelList[topicIndex] }}:
                                          {{ formatRange(1, item, topicItem) }}%
                                        </div>
                                      </template>
                                      <!--    判断题    -->
                                      <template v-if="item.topicType == 2">
                                        <div class="range_item">
                                          A.正确:{{
                                            formatRange(2, item).trueRange
                                          }}%
                                        </div>
                                        <div class="range_item">
                                          B.错误:
                                          {{ formatRange(2, item).falseRange }}%
                                        </div>
                                      </template>
                                    </div>
                                  </div>
                                  <div slot="reference">
                                    <!--    判断题&选择题才显示    -->
                                    <svg-icon
                                      v-if="[0, 1, 2].includes(item.topicType)"
                                      class-name="statistics_svg pointer"
                                      icon-class="statistics_svg"
                                    />
                                  </div>
                                </el-popover>
                              </div>
                            </div>
                            <div class="statistics_right">
                              <div
                                @click="editTopic(item)"
                                class="btn_text edit pointer"
                              >
                                编辑
                              </div>
                              <div class="line"></div>
                              <div
                                @click="delTopic(item)"
                                class="btn_text delete pointer"
                              >
                                删除
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="paging_box"
                  v-show="total > 0"
                  :class="{ border_1: enterType == 1 }"
                >
                  <pagination
                    :iSmanger="false"
                    :total="total"
                    @pagination="refreshBankTopicLict"
                    :page.sync="searchModel.pageNum"
                    :limit.sync="searchModel.pageSize"
                  />
                </div>
              </template>
              <div class="empty_box" v-if="topicList.length == 0">
                <el-empty
                  :image-size="80"
                  image="https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/empty_img_topiv.png"
                  description="暂无题目"
                ></el-empty>
              </div>
            </div>
          </div>
        </div>
        <!--  添加/编辑试题抽屉  -->
        <addTopicDrawer
          @submit="saveTopicByType"
          :open.sync="showTopicState"
          :topic-id="currentTopicId"
          :index-id="nowIndexId"
          :course-id="courseId"
          :open-type="openTopicType"
        ></addTopicDrawer>
        <!--  AI出题    -->
        <AIoutTopicDrawer
          :show.sync="showAiDrawer"
          @updateData="getBankTopicLict"
          :open-type="showAiType"
          :index-id="nowIndexId"
          :course-id="courseId"
        ></AIoutTopicDrawer>
      </div>
    </template>
    <!-- 已选择试题列表   -->
    <selectTopicListDrawer
      :title="selectTopicTitle"
      :open.sync="showTopicDrawer"
      :select-topic-list="selectTopicList"
    >
    </selectTopicListDrawer>
    <!--  批量导入试题  -->
    <topicImportCheckDiaLog
      @refreshTopic="refreshTopic"
      :open.sync="showTopicImportCheck"
      componentType="1"
      :ancestorsName="nowIndexName"
      :indexId="nowIndexId"
    ></topicImportCheckDiaLog>
    <!--  文档导入试题弹框  -->
    <topicImportByFile
      @topicGet="topicGet"
      :open.sync="showTopicImportByFile"
      :indexId.sync="nowIndexId"
    ></topicImportByFile>
    <!--  试题导出弹框  -->
    <topicExportRadios
      :ancestorsName="nowIndexName"
      :open.sync="topicExportRadiosOpen"
      :indexId.sync="nowIndexId"
      :topics="selectTopicList"
      :topicIds="selections.join(',')"
    ></topicExportRadios>
  </div>
</template>

<script>
import topicExportRadios from "@/views/tea_course/components/topicExportRadios";
import topicImportByFile from "@/views/tea_course/components/topicImportByFile";
import topicImportCheckDiaLog from "../../tea_course/components/topicImportCheckDia";
import selectTopicListDrawer from "./selectTopicListDrawer";
import addTopicDrawer from "./addTopicDrawer";
import AIoutTopicDrawer from "./AIoutTopicDrawer";
import {
  getCourseIndexTreesApi,
  getBankTopicLickApi,
  deleteTopicApi,
  addTopicApi,
  editTopicApi,
} from "@/api/ExaminationModule";
import { updateItemById } from "@/views/ExaminationModule/utils";
import { driver } from 'driver.js'
import "driver.js/dist/driver.css";
import { getUserGuideApi, setUserGuideApi } from '@/api/login'

export default {
  name: "topicBank",
  dicts: ["topic_type", "topic_difficulty"],
  components: {
    topicExportRadios,
    topicImportByFile,
    topicImportCheckDiaLog,
    selectTopicListDrawer,
    addTopicDrawer,
    AIoutTopicDrawer,
  },
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "题库",
    },
    enterType: {
      type: [Number, String],
      default: 1,
    },
    examId: {
      type: [Number, String],
      default: "",
    },
    courseId: {
      type: [Number, String],
      default: "",
      required: true,
    },
  },
  data() {
    return {
      // 导出题库 boolean
      topicExportRadiosOpen: false,

      //已选择的题目列表
      selectTopicList: [],
      //已选择的题目抽屉状态
      showTopicDrawer: false,
      selectTopicTitle: "",
      // 文档导入试题弹框
      showTopicImportByFile: false,
      // 题库导入弹框状态
      showTopicImportCheck: false,
      // AI出题类型  0: "AI出题(联网出题)" 1: "AI出题(基于课程内容)",
      showAiType: 1,
      // AI出题抽屉状态
      showAiDrawer: false,
      selections: [],

      //选择题类型
      choiceTypes: [0, 1],
      //简答题操作题类型
      QaTypes: [4, 5],
      // 当前知识点id
      nowIndexId: "",
      //当前知识点名称
      nowIndexName: "",
      // 题目总数
      total: 0,
      //选项列表
      labelList: this.$store.getters.EN,
      //题目列表loading
      loading: false,
      // 知识点树loading
      treesLoading: false,
      // 添加题目抽屉状态
      showTopicState: false,
      //当前题目id
      currentTopicId: "",
      // 题目抽屉打开类型
      openTopicType: "",
      // 全部展开
      allExpand: false,
      // 全选
      allSelect: false,
      // 全部题目展开
      allTopicExpand: false,
      // 多选删除
      allMultiDelete: false,
      // 题目列表
      topicList: [],
      // 题目难易程度类名
      difficultyBgClass: {
        0: "easy_bg",
        1: "normal_bg",
        2: "hard_bg",
        3: "no_difficulty_bg",
      },
      // 搜索参数
      searchModel: {
        content: "",
        topicType: "",
        difficulty: "",
        pageNum: 1,
        pageSize: 10,
      },
      // 知识点树
      courseIndexTree: [],
      userGuideValue:{}
    };
  },
  watch: {
    open: {
      handler(val) {
        if (val) {
          this.getCourseIndexTrees(this.courseId);
          this.$nextTick(() => {
            this.getUserGuide()
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    async getUserGuide(){
      try {
        let res = await getUserGuideApi()
        const {code,msg} = res
        if (code==200){
          this.userGuideValue = msg?JSON.parse(msg):{}
          if (!this.userGuideValue.bank_driver && this.enterType == 1){
            this.driveAction()
          }
        }
      }catch (e) {
        console.error(e)
      }
    },
    async setUserGuide(){
      try {
        this.userGuideValue.bank_driver = true
        let params = {
          value:JSON.stringify(this.userGuideValue)
        }
        let res = await setUserGuideApi(params)
        const {code} = res
        if (code==200){
          console.log('设置成功')
        }
      }catch (e) {
        console.error(e)
      }
    },
    driveAction(){
      const driverObj = driver({
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        doneBtnText: '完成',
        overlayColor: '#000000',
        allowClose: false,
        popoverClass:'custom_popover',
        disableActiveInteraction: true,
        onNextClick:(e)=>{
          let orangeBtnRef = this.$refs.orangeBtnRef
          let allContentRef = document.querySelector('.all_content')
          let bankBtnRef = document.querySelector('.bank_btn')
          if (e == orangeBtnRef){
            this.showTopicImportByFile = true;
            this.$nextTick(()=>{
              driverObj.moveNext();
            })
          }else if(allContentRef == e){
            localStorage.setItem("topicFileImportArr", '[]');
            this.showTopicImportCheck = true;
            this.$nextTick(()=>{
              driverObj.moveNext();
            })
          }else if(e==bankBtnRef){
            this.showTopicImportCheck = false;
            this.showTopicImportByFile = false;
            driverObj.moveNext();
            this.setUserGuide()
          }else {
            driverObj.moveNext();
          }
        },
        onPrevClick:(e)=>{
          let allContentRef = document.querySelector('.all_content')
          let bankBtnRef = document.querySelector('.topicImportCheckDia')
          if (e == allContentRef){
            this.showTopicImportByFile = false;
            driverObj.movePrevious();
          }else if(e == bankBtnRef){
            this.showTopicImportCheck = false;
            driverObj.movePrevious();
          }else {
            driverObj.movePrevious();
          }
        },
        showButtons:[
          'next',
          'previous',
        ],
        steps: [
          { element: '.orange_btn', popover: { title: '', description: '点击“批量导入试题”' } },
          { element: '.all_content', popover: { title: '', description: '点击“下载模板”，下载Word或Excel格式的模板，按照模板格式进行试题录入。完成后点击“上传文件”，选择对应文件进行导入' } },
          { element: '.topicImportCheckDia', popover: { title: '', description: '导入的试题会在输入区显示，支持在线编辑，具体规则可以点击输入区右上角的"输入规范"进行查看。检查区会同步显示输入区内容的匹配情况，如果出现错误会实时进行提醒。' } },
          { element: '.bank_btn', popover: { title: '', description: '所有题目检查无误后，点击“导入题库”完成试题的批量导入' } },
        ]
      });
      driverObj.drive();
    },
    handleExport() {
      if (this.selections.length == 0) {
        this.$modal.msgWarning("请先选择题目");
        return;
      }
      let selectTopicList = [];
      this.topicList.forEach((item) => {
        if (this.selections.includes(item.id)) {
          selectTopicList.push(item);
        }
      });
      this.selectTopicList = selectTopicList;
      this.topicExportRadiosOpen = true;
    },
    showSelectTopicDrawer() {
      if (this.selections.length == 0) {
        this.$modal.msgWarning("请先选择题目");
        return;
      }
      let selectTopicList = [];
      this.topicList.forEach((item) => {
        if (this.selections.includes(item.id)) {
          selectTopicList.push(item);
        }
      });
      this.selectTopicTitle = `已选择试题(${selectTopicList.length})`;
      this.selectTopicList = selectTopicList;
      this.showTopicDrawer = true;
    },
    // 刷新题库
    refreshTopic() {
      this.resetState();
      this.getBankTopicLict();
    },
    topicGet(e) {
      localStorage.setItem("topicFileImportArr", JSON.stringify(e));
      if (this.enterType == 1) {
        this.$router.push({
          path: "/course/topicImportCheck",
          query: { indexId: this.nowIndexId, ancestorsName: this.nowIndexName },
        });
      } else {
        this.showTopicImportCheck = true;
      }
    },
    toImport(e) {
      this.showTopicImportByFile = true;
    },
    showAiTopic(type) {
      this.showAiType = type;
      this.showAiDrawer = true;
    },
    // 格式化统计
    formatRange(type, item, topicItem) {
      if (type == 1) {
        //多选题计算方式
        if (item.topicType == 1){
          let allSelectCount = 0;
          item.ccTopicOptionList.forEach((optionItem)=>{
            allSelectCount+=optionItem.selectCount
          })
          if (allSelectCount == 0){
            return 0
          }
          return Math.round((topicItem.selectCount / allSelectCount) * 100).toFixed(2);
        }else {
          if (item.answerCount == 0) {
            return 0;
          }
          return Math.round((topicItem.selectCount / item.answerCount) * 100).toFixed(2);
        }

      } else {
        if (item.answerCount == 0) {
          return {
            trueRange: 0,
            falseRange: 0,
          };
        }
        let data = item.ccTopicOptionList[0];
        if (data.optionValue == "正确") {
          let trueRange = Math.round(
            (data.selectCount / item.answerCount) * 100
          ).toFixed(2);
          return {
            trueRange: trueRange,
            falseRange: 100 - trueRange,
          };
        } else {
          let falseRange = Math.round(
            (data.selectCount / item.answerCount) * 100
          ).toFixed(2);
          return {
            trueRange: 100 - falseRange,
            falseRange: falseRange,
          };
        }
      }
    },
    changeAllMulti(allMultiDelete) {
      if (allMultiDelete) {
        let arr = [];
        this.topicList.forEach((item) => {
          item.checked = true;
          arr.push(item.id);
        });
        this.selections = arr;
      } else {
        this.selections = [];
        this.topicList.forEach((item) => {
          item.checked = false;
        });
      }
    },
    changeItemSelect(item) {
      if (item.checked) {
        this.selections.push(item.id);
      } else {
        this.selections.splice(this.selections.indexOf(item.id), 1);
      }
    },
    multiDel() {
      if (this.selections.length == 0) {
        this.$modal.msgWarning("请选择要删除的题目");
        return;
      }
      this.$confirm("是否确认删除所选的题目，删除后将不可恢复？", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteTopic(this.selections.join(","), this.selections.length);
        })
        .catch(() => {
          this.$modal.msgInfo("已取消");
        });
    },
    delTopic(item) {
      this.$confirm("是否确认删除该题，删除后将不可恢复？", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteTopic(item.id, 1);
        })
        .catch(() => {
          this.$modal.msgInfo("已取消");
        });
    },
    async deleteTopic(ids, num) {
      const loading = this.$loading({
        lock: true,
        text: "正在处理...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.3)",
      });
      try {
        let res = await deleteTopicApi(ids);
        const { code } = res;
        if (code == 200) {
          this.$modal.msgSuccess("删除成功");
          this.selections = [];
          this.allMultiDelete = false;
          this.topicList.forEach((item) => {
            item.checked = false;
          });
          this.getBankTopicLict();
          updateItemById(
            this.courseIndexTree,
            this.nowIndexId,
            "count",
            "del",
            num
          );
        }
      } catch (e) {
        console.error(e);
      } finally {
        loading.close();
      }
    },
    resetState() {
      this.searchModel = {
        content: "",
        topicType: "",
        difficulty: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.topicList = [];
      this.selections = [];
      this.allMultiDelete = false;
      this.topicList.forEach((item) => {
        item.checked = false;
      });
    },
    // 保存题目
    async saveTopicByType(e) {
      if (this.openTopicType == "add") {
        this.addCommonTopic(e);
      } else {
        /**
         *  e.type==1 新增
         * e.type==2 保存并同步
         * e.type==3 保存并新增
         * */
        //保存并同步
        if (e.type == 2) {
          this.editCommonTopic(e);
        } else {
          this.addCommonTopic(e);
        }
      }
    },
    // 添加题目至题库
    async addCommonTopic(params) {
      const loading = this.$loading({
        lock: true,
        text: "正在添加...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.3)",
      });
      try {
        let res = await addTopicApi(params);
        const { code } = res;
        if (code == 200) {
          this.$modal.msgSuccess("添加成功");
          this.getBankTopicLict();
          updateItemById(
            this.courseIndexTree,
            this.nowIndexId,
            "count",
            "add",
            1
          );
        }
      } catch (e) {
        console.error(e);
      } finally {
        loading.close();
      }
    },
    // 添加题目
    async editCommonTopic(params) {
      const loading = this.$loading({
        lock: true,
        text: "正在处理...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.3)",
      });
      try {
        let res = await editTopicApi(params);
        const { code } = res;
        if (code == 200) {
          this.$modal.msgSuccess("编辑成功");
          this.getBankTopicLict();
        }
      } catch (e) {
        console.error(e);
      } finally {
        loading.close();
      }
    },
    // 重置搜索
    resetSearch() {
      this.searchModel = {
        content: "",
        topicType: "",
        difficulty: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.getBankTopicLict();
    },
    refreshBankTopicLict() {
      this.selections = []
      this.allMultiDelete = false;
      this.getBankTopicLict();
    },
    // 获取题目列表
    async getBankTopicLict() {
      this.loading = true;
      try {
        let params = {
          indexId: this.nowIndexId,
          ...this.searchModel,
        };
        //从题库中选择时需要加传参examld
        if (this.enterType == 2) {
          params.examId = this.examId;
        }
        let res = await getBankTopicLickApi(params);
        const { code, data } = res;
        if (code === 200) {
          data.rows.forEach((value) => {
            value.expandState = false;
            value.checked = false;
            if (value.answerCount == 0 || value.trueCount == 0) {
              value.answerRange = 0;
            } else {
              value.answerRange = Math.round((value.trueCount / value.answerCount) * 100).toFixed(2);
            }
          });
          this.topicList = data.rows;
          this.total = data.total;
        }
      } catch (e) {
        console.error(e);
      } finally {
        this.loading = false;
      }
    },
    // 添加题目
    addTopic() {
      this.showTopicState = true;
      this.openTopicType = "add";
    },
    // 编辑题目
    editTopic(item) {
      this.currentTopicId = item.id;
      this.showTopicState = true;
      this.openTopicType = "edit";
    },
    //获取知识点列表
    async getCourseIndexTrees(id) {
      this.treesLoading = true;
      try {
        let res = await getCourseIndexTreesApi(id);
        const { code, data } = res;
        if (code == 200) {
          this.courseIndexTree = this.formatTreeData(data);
          this.$nextTick(() => {
            this.nowIndexId = this.courseIndexTree[0].id;
            this.nowIndexName = this.courseIndexTree[0].name;
            this.$refs.selectTreeRef.setCurrentKey(this.nowIndexId);
            this.getBankTopicLict();
          });
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.treesLoading = false;
      }
    },
    // 格式化树结构数据
    formatTreeData(data, level = 0, selectIds = []) {
      return data.map((item) => {
        const newItem = { ...item, level, selectIds }; // 添加 level 属性
        if (newItem.children && newItem.children.length > 0) {
          newItem.children = this.formatTreeData(
            newItem.children,
            level + 1,
            []
          ); // 递归处理子节点
        }
        return newItem;
      });
    },
    // 关闭题库抽屉
    handleClose() {
      this.$emit("update:open", false);
      this.resetState();
    },
    //切换展开收起
    changeAllExpand(key) {
      this[key] = !this[key];
      if (key == "allTopicExpand") {
        this.topicList.forEach((item) => {
          item.expandState = this[key];
        });
      }else {
        if (this.allExpand) {
          this.collapseAllNodes(this.$refs.selectTreeRef.store.root);
        } else {
          this.expandAllNodes(this.$refs.selectTreeRef.store.root);
        }
      }
    },
    //展开所有节点
    expandAllNodes(node) {
      if (node) {
        node.expanded = true;
        if (node.childNodes) {
          node.childNodes.forEach((childNode) => {
            this.expandAllNodes(childNode);
          });
        }
      }
    },
    //收起所有节点
    collapseAllNodes(node) {
      if (node) {
        node.expanded = false;
        if (node.childNodes) {
          node.childNodes.forEach((childNode) => {
            this.collapseAllNodes(childNode);
          });
        }
      }
    },
    //知识点树点击节点
    handleClick(e) {
      console.log("知识点树点击节点", e);
      let oldId = this.nowIndexId;
      this.nowIndexId = e.id;
      this.nowIndexName = e.name;
      if (oldId == e.id) {
        return;
      }
      this.resetState();
      this.getBankTopicLict();
    },
    sumitData() {
      if (this.selections.length == 0) {
        this.$modal.msgWarning("请选择要导入的题目");
        return;
      }
      this.$emit("sumitData", this.selections);
      this.handleClose();
    },
  },
};
</script>
<style scoped lang="scss">
.option_item{
  max-width: 820px;
}
@import "../../../assets/styles/mixin.scss";
.drawer_container {
  width: 100%;
  border-top: 1px solid #ebebeb;
  .main_content {
    width: 100%;
    display: flex;
    height: calc(100vh - 76px);
    &_left {
      width: 320px;
      height: 100%;
      border-right: 1px solid #ebebeb;
      .left_btns {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 10px 12px;
        box-sizing: border-box;
      }
      .course_tree {
        width: 100%;
        height: calc(100% - 40px);
        padding: 0 10px 0 0;
        box-sizing: border-box;
        overflow: auto;
        .custom_tree_node {
          width: 100%;
          padding: 0 12px 0 0;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .topic_num {
            width: 16px;
            height: 16px;
            background: #28b28b;
            border-radius: 50%;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 500;
            font-size: 12px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
    &_right {
      // flex: 1;
      width: calc(100% - 320px);
      .right_top {
        width: 100%;
        padding: 16px 24px;
        box-sizing: border-box;
        .search_collect {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .ipt_collect {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .item_ipt {
              display: flex;
              align-items: center;
              gap: 0 16px;
              .label {
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #666666;
              }
              .ipt {
                width: 220px;
                height: 32px !important;
              }
            }
          }
          .btns {
            margin-left: 22px;
            display: flex;
            align-items: center;
            gap: 0 8px;
            .search_btn {
              @include btn_plain(#28b28b, #ffffff) {
                width: 65px;
                height: 32px;
                border-radius: 4px;
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
              }
              &:hover {
                background: #2a9e7c;
              }
            }
            .reset_btn {
              @include plain_hover(#ffffff, rgba(0, 0, 0, 0.75), #11a987) {
                width: 65px;
                height: 32px;
                border-radius: 4px;
                border: 1px solid rgba(0, 0, 0, 0.15);
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
              }
              &:hover {
                background: #e7f6f3;
                border: 1px solid #11a987;
              }
            }
          }
        }
      }
      .topic_btns {
        margin-bottom: 16px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        box-sizing: border-box;
        .left_btns {
          display: flex;
          align-items: center;
          gap: 0 16px;
          .blue_btn {
            @include plain_hover(#f3faff, #1677ff, #ffffff) {
              width: 130px;
              height: 32px;
              border-radius: 8px;
              border: 1px solid #1677ff;
              gap: 0 4px;
            }
          }

          .orange_btn {
            @include plain_hover(#fff8ee, #e6a23b, #ffffff) {
              width: 130px;
              height: 32px;
              border-radius: 8px;
              border: 1px solid #e6a23b;
              gap: 0 4px;
            }
          }
          .aqua_btn {
            @include plain_hover(#e2daff, #520ad9, #ffffff) {
              width: 130px;
              height: 32px;
              border-radius: 8px;
              border: 1px solid #520ad9;
              gap: 0 4px;
            }
          }

          .green_btn {
            @include plain_hover(#ecfffa, #28b28b, #ffffff) {
              width: 88px;
              height: 32px;
              border-radius: 8px;
              border: 1px solid #28b28b;
              gap: 0 4px;
            }
          }
          .red_btn {
            @include plain_hover(#ffeeee, #e95756, #ffffff) {
              width: 88px;
              height: 32px;
              border-radius: 8px;
              border: 1px solid #e99999;
              gap: 0 4px;
            }
          }
        }
        .right_btns {
          display: flex;
          gap: 0 24px;
          align-items: center;
        }
      }
      .right_mid {
        width: 100%;
        /*有 topic_btns 时的高度：  height: calc(100vh - 260px);    */
        height: calc(100vh - 324px);
        overflow: auto;
        .topic_collect {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          transition: all 0.3s ease;
          gap: 40px 0;
          .topic_item {
            width: 100%;
            padding: 0 32px 0 24px;
            box-sizing: border-box;
            display: flex;
            .checkbox {
              margin-top: 4px;
            }
            .topic_info {
              flex: 1;
              width: 100%;
              margin-left: 8px;
              .top {
                width: 100%;
                display: flex;
                justify-content: space-between;
                .top_left {
                  display: flex;
                  .topic_content {
                    max-width: 835px;
                    font-family: PingFangSC, PingFang SC, sans-serif;
                    font-weight: 400;
                    font-size: 16px;
                    color: #333333;
                  }
                }
                .top_right {
                  .collapse_box {
                    margin-left: 24px;
                    display: flex;
                    align-items: center;

                    span {
                      font-family: PingFangSC, PingFang SC, sans-serif;
                      font-weight: 400;
                      font-size: 14px;
                      color: #28b28b;
                      margin-right: 8px;
                    }
                    .collapse_svg {
                      font-size: 14px;
                    }
                  }
                }
              }
              .content_box {
                width: 100%;
                overflow: hidden;
                transition: all 0.3s ease;
                .option_list {
                  margin: 20px 0;
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  gap: 10px 0;
                  .cc_topic_item {
                    width: 100%;
                    display: flex;
                    .label_text{
                      width: 20px;
                      font-family: PingFangSC, PingFang SC, sans-serif;
                      font-weight: 400;
                      font-size: 16px;
                      color: #333333;
                    }
                    .option_item{
                      max-width: 780px;
                      font-family: PingFangSC, PingFang SC, sans-serif;
                      font-weight: 400;
                      font-size: 16px;
                      color: #333333;
                    }
                  }
                }
                .true_answer {
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 400;
                  font-size: 16px;
                  color: #28b28b;
                  span{
                    color: #999999;
                  }
                }
                .reslove_text {
                  margin-top: 10px;
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 400;
                  font-size: 16px;
                  color: #333333;
                  span{
                    color: #999999;
                  }
                }
                .topic_statistics {
                  margin-top: 10px;
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .statistics_left {
                    display: flex;
                    gap: 0 64px;
                    .text {
                      font-family: PingFangSC, PingFang SC, sans-serif;
                      font-weight: 400;
                      font-size: 14px;
                      color: #999999;
                      display: flex;
                      gap: 0 8px;
                      .statistics_svg {
                        font-size: 14px;
                        &:hover {
                          color: #28b28b;
                        }
                      }
                    }
                  }
                  .statistics_right {
                    display: flex;
                    align-items: center;
                    gap: 0 16px;
                    .btn_text {
                      font-family: PingFangSC, PingFang SC, sans-serif;
                      font-weight: 400;
                      font-size: 14px;
                      color: #333333;
                      padding: 0 6px;
                      box-sizing: border-box;
                      border-radius: 4px;
                    }
                    .line {
                      width: 1px;
                      height: 14px;
                      background: #333333;
                    }
                    .edit {
                      &:hover {
                        color: #e6a23b;
                        background: #f1f1f1;
                      }
                    }
                    .delete {
                      &:hover {
                        color: #e95756;
                        background: #f1f1f1;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .paging_box {
        padding: 16px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
      .right_bottom {
        width: 100%;
        border-top: 1px solid #ebebeb;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 32px 0 24px;
        .bottom_left {
          padding: 6px 5px 6px 10px;
          box-sizing: border-box;
          background: rgba(0, 0, 0, 0.06);
          border-radius: 4px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 500;
          font-size: 14px;
          color: #28b28b;
        }
        .bottom_right {
          display: flex;
          align-items: center;
          gap: 0 32px;
          .text {
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }
          .btns {
            display: flex;
            align-items: center;
            gap: 0 16px;
            .close_btn {
              @include plain_hover(#ffffff, rgba(0, 0, 0, 0.65), #ffffff) {
                width: 65px;
                height: 32px;
                border-radius: 4px;
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
                border: 1px solid #d9d9d9;
              }
            }
            .sure_btn {
              @include btn_plain(#28b28b, #ffffff) {
                width: 65px;
                height: 32px;
                border-radius: 4px;
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
              }
              &:hover {
                background: #2a9e7c;
              }
            }
          }
        }
      }
    }
  }
}
.hover_content {
  .left_label {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
  }
  .content {
    margin: 12px 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px 0;
    .range_item {
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
  }
}
.empty_box {
  padding-top: 10vh;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
}
.expand_box {
  display: flex;
  align-items: center;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  gap: 0 4px;
  .icon {
    width: 16px;
    height: 16px;
  }
}
::v-deep .el-tree-node__content {
  height: 35px;
}
::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: rgba(5, 192, 173, 0.08);
}
.content_hide {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.max_height_0 {
  max-height: 0 !important;
}
.h_0 {
  height: 0 !important;
  overflow: hidden;
}
.height_2 {
  height: calc(100vh - 254px) !important;
}
.height_right_2 {
  height: calc(100vh - 358px) !important;
}
.border_1 {
  border-top: 1px solid #ebebeb;
}
.main_container {
  margin: 15px auto 0 auto;
  width: 1200px;
  height: calc(100vh - 120px);
  overflow: hidden;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 0 8px 0 rgba(9, 28, 61, 0.17);
}
.height_componentType_2 {
  height: calc(100vh - 170px) !important;
  border-radius: 0 0 0 16px;
}
.max_width_700 {
  max-width: 700px !important;
}
.margrn_2 {
  margin-top: -2px !important;
}
.mini_ipt {
  width: 140px;
}
.title_name {
  width: 100%;
  padding: 12px 24px;
  box-sizing: border-box;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
}
</style>
<style>
.color_orange {
  color: #ef7d00;
}
.easy_bg {
  background: #6dd400;
}
.normal_bg {
  background: #f7b500;
}
.hard_bg {
  background: #fa6400;
}
.no_difficulty_bg {
  background: #0091ff;
}
.difficulty_item {
  display: inline-block;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;
  padding: 0 4px;
  border-radius: 2px;
  box-sizing: border-box;
}
.driver-popover-description{
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #333333;
}
.driver-popover.custom_popover button {
  flex: 1;
  text-align: center;
  background-color: #ffffff;
  color: #28B28B;
  border: 1px solid #28B28B;
  text-shadow: none;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 6px 16px;
  box-sizing: border-box;
  border-radius: 8px;
}
.driver-popover.custom_popover button:hover {
  background-color: #28B28B;
  color: #ffffff;
  border-color: #28B28B;
}
.driver-popover.custom_popover button:active {
  background-color: #59c1a3;
  color: #ffffff;
  border-color: #59c1a3;
}
</style>
